<template>
	<view class="content">
		<view class="swipers">
			<u-swiper
				height="100%"
				:list="activityInfo.picarr"
				@click="clickBnner"
			></u-swiper>
		</view>
		<view class="contentBox">
			<view class="nuberBox">
				<view class="items">
					<text>{{activityInfo.project_num}}</text>
					<text>候选社区</text>
				</view>
				<view class="items">
					<text>{{activityInfo.vote_num}}</text>
					<text>累计票数</text>
				</view>
				<view class="items">
					<text>{{activityInfo.access_num}}</text>
					<text>访问数</text>
				</view>
			</view>
			<view class="guiZeBox">
				<view class="titleBox">活动规则</view>
				<view class="listBox">
					<view class="lines">
						<view class="img">
							<image src="../../static/image/time.png" mode=""></image>
						</view>
						<view class="texts">
							<text>活动开始:</text>
							<text>{{activityInfo.start_time}}</text>
						</view>
					</view>
					<view class="lines">
						<view class="img">
							<image src="../../static/image/time.png" mode=""></image>
						</view>
						<view class="texts">
							<text>活动结束:</text>
							<text>{{activityInfo.end_time}}</text>
						</view>
					</view>
					<view class="lines">
						<view class="img">
							<image src="../../static/image/time.png" mode=""></image>
						</view>
						<view class="texts">
							<text>投票结果倒计时:</text>
							<text v-if="timeStatus == 1">投票未开始</text>
							<view v-if="timeStatus == 2">
								<u-count-down :time="djsNum" format="DD:HH:mm:ss"></u-count-down>
							</view>
							<text v-if="timeStatus == 3">投票已结束</text>
						</view>
					</view>
					<view class="lines">
						<view class="img">
							<image src="../../static/image/jingao.png" mode=""></image>
						</view>
						<view class="texts">
							<text>活动规则:</text>
							<text>{{activityInfo.rules}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="inputBox">
				<view class="inputs">
					<input type="text" v-model="search" placeholder="搜索作者名称或编号" />
				</view>
				<view class="btns" @click="clcikSearch">搜索</view>
			</view>
			<view class="sqList">
				<view class="sqItem" v-for="item in proList" :key="item" @click="clickItem(item)">
					<view class="imgBox">
						<image :src="item.pic" mode=""></image>
						<view class="numberBox">{{item.number}}</view>
					</view>
					<view class="titleBox">{{item.title}}</view>
					<view class="btnBox">
						<view class="nums">{{item.vote_num}}</view>
						<view class="texts">投票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getProjectList,userLoginH5,activityDetial} from '../../request/api.js'
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				// 项目列表
				proList:[],
				// 当前页面
				page:1,
				page_size:10,
				// 总页数
				last_page:0,
				// 活动id
				activity_id:14,
				
				// 活动内容
				activityInfo:{},
				
				// 输入框
				search:'',
				// 当前时间状态 1未开始 2进行中 3已结束
				timeStatus:1,
				djsNum:0,
			}
		},
		onLoad(option) {
			if(option.id){
				uni.setStorageSync('activity_id', option.id);
			}
			this.activity_id = uni.getStorageSync('activity_id');
		},
		onShow() {
			// 判断是否登录
			let token = uni.getStorageSync('token');
			if(!token){
				// 未登录
				console.log('未登录')
				// 判断
				this.isWeixin = this.isWechat()
				if(this.isWeixin){
					let code = this.checkWeChatCode()//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
					// 判断是否有code
					if(code){
						console.log('code='+code)
						// 有token获取登录信息
						userLoginH5(code).then(res=>{
							console.log(JSON.parse(JSON.stringify(res)))
							let token = res.data.token.access_token;
							uni.setStorageSync('token',token)
							this.getactivityDetial()
							this.page = 1;
							this.proList = [];
							this.last_page =0;
							this.getProList()
						})
					}else{
						// 没有code 跳转微信登录
						console.log('没有拿到code')
						// 跳转微信授权
						this.getWeChatCode()
					}
				}
			}else{
				// 已登录
				console.log('已登录')
				this.getactivityDetial()
				this.page = 1;
				this.proList = [];
				this.last_page =0;
				this.getProList()
			}
		},
		methods: {
			// 获取活动详情
			getactivityDetial(){
				let obj = {
					id:this.activity_id
				};
				activityDetial(obj).then(res=>{
					console.log(res);
					let picarr = res.data.picarr.split(',');
					this.activityInfo = res.data;
					this.activityInfo.picarr = picarr;
					this.countActiveTime()
				})
			},
			// 获取项目列表
			getProList(){
				let obj = {
					page:this.page,
					page_size:this.page_size,
					activity_id:this.activity_id,
					search:this.search
				};
				getProjectList(obj).then(res=>{
					console.log(res)
					this.last_page = res.data.last_page;
					this.proList = [...this.proList,...res.data.data];
				}).catch(err=>{
					console.log(err)
				})
			},
			// 点击搜索
			clcikSearch(){
				this.page = 1;
				this.proList = [];
				this.last_page =0;
				this.getProList()
			},
			// 点击每一个
			clickItem(data){
				console.log(data);
				uni.navigateTo({
					url:'/pages/itemDetial/itemDetial?id='+data.id
				})
			},
			// 计算活动时间
			countActiveTime(){
				let nowDate = this.$moment().valueOf();
				let statrDate = this.$moment(this.activityInfo.start_time).valueOf();
				let endDate = this.$moment(this.activityInfo.end_time).valueOf();
				console.log(nowDate)
				console.log(statrDate)
				console.log(endDate)
				if(nowDate < statrDate){
					this.timeStatus = 1
				}else{
					// 现在时间大于开始时间
					if(nowDate <= endDate){
						this.timeStatus = 2;
						this.djsNum = endDate - nowDate;
					}else{
						this.timeStatus = 3;
					}
				}
			},
			
			// 点击banner跳转页面
			clickBnner(index){
				console.log(index)
				if(index == 1){
					uni.navigateTo({
						url:'/pages/introduction/introduction'
					})
				}else if(index == 2){
					uni.navigateTo({
						url:'/pages/infoTwo/infoTwo'
					})
				}
				
			},
			
			isWechat() {
			  return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			//方法:用来提取code
			getUrlCode(name) {
			  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
			  let code = this.getUrlCode('code')
			 //  uni.showToast({
				// title:`微信code=${code}`
			 //  })
			  if (code) {	
				  return code
				// this.getOpenidAndUserinfo(code)
			  }else{
				  return false
			  }
			},
			//请求微信接口，用来获取code
			getWeChatCode() {
			  let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
			  let appid = 'wxf5282b369937646a'
					
			  //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
			  window.location.href =
				"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
				appid +
				"&redirect_uri=" +
				local +
				"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
			},
			/*微信登录相关  end*/
			afterLogin(res){
			  let user = res.data.user
			  uni.setStorageSync('token', res.data.token);
			  let u = {
				avatar: user.avatar ? user.avatar : this.avatar,
				mobile: user.mobile,
				nickname: user.nickname ? user.nickname : '稀土'
			  }
			  uni.setStorage({
				key: 'u',
				data: u,
				success: () => {
					
				  let url = uni.getStorageSync('redirect')
				  uni.reLaunch({
					url: url ? url : '/pages/index'
				  })
				}
			  });
			},
		},
		onReachBottom(){
			// 判断是否是最后一页
			if(this.page >= this.last_page){
				// 最后一页了
				return false
			}
			this.page = this.page + 1;
			this.getProList()
			console.log('触底了')
		},
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		// min-height: 100%;
		display: flex;
		flex-direction: column;
		.swipers{
			width: 100%;
			height: 418rpx;
			flex: none
		}
		.contentBox{
			flex: 1;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			.nuberBox{
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 26px;
				box-sizing: border-box;
				border-radius: 28rpx;
				background-color: #fff;
				.items{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text{
						&:first-child{
							font-size: 38rpx;
							color: #255EB2;
							font-weight: bold;
						}
						&:last-child{
							font-size: 24rpx;
							color: #1E1E1E;
							margin-top: 20rpx;
						}
					}
					
				}
			}
			.guiZeBox{
				width: 100%;
				height: auto;
				border-radius: 18rpx;
				overflow: hidden;
				margin-top: 21rpx;
				.titleBox{
					width: 100%;
					height: 76rpx;
					background-color: #255EB2;
					text-align: center;
					line-height: 76rpx;
					color: #fff;
					font-size: 31rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.listBox{
					width: 100%;
					height: auto;
					padding: 50rpx 20rpx;
					box-sizing: border-box;
					background-color: #fff;
					.lines{
						width: 100%;
						height: auto;
						display: flex;
						align-items: flex-start;
						margin-bottom: 20rpx;
						&:last-child{
							margin-bottom: 0;
						}
						.img{
							width: 22rpx;
							height: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							flex: none;
							margin-top: 6rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.texts{
							display: flex;
							align-items: flex-start;
							margin-left: 20rpx;
							flex: 1;
							text{
								&:nth-child(1){
									font-size: 28rpx;
									color: #1E1E1E;
									font-weight: bold;
									flex: none;
								}
								&:nth-child(2){
									font-size: 28rpx;
									color: #1E1E1E;
								}
							}
						}
					}
				}
			}
			.inputBox{
				width: 100%;
				height: 82rpx;
				display: flex;
				align-items: center;
				border-radius: 18rpx;
				overflow: hidden;
				margin-top: 25rpx;
				.inputs{
					flex: 1;
					height: 100%;
					background-color: #fff;
					padding-left: 27rpx;
					input{
						width: 100%;
						height: 100%;
						line-height: 82rpx;
						font-size: 24rpx;
					}
				}
				.btns{
					flex: none;
					width: 143rpx;
					height: 100%;
					background-color: #255EB2;
					text-align: center;
					line-height: 82rpx;
					font-size: 31rpx;
					color: #FFFFFF;
				}
			}
			.sqList{
				width: 100%;
				height: auto;
				display: flex;
				align-content: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 25rpx;
				.sqItem{
					width: 328rpx;
					height: auto;
					margin-top: 27rpx;
					&:nth-child(-n+2){
						margin-top: 0;
					}
					.imgBox{
						width: 100%;
						height: 286rpx;
						position: relative;
						image{
							width: 100%;
							height: 100%;
						}
						.numberBox{
							position: absolute;
							padding: 5rpx 15rpx;
							box-sizing: border-box;
							border-radius: 10rpx;
							background-color: #0604797a;
							color: #fff;
							text-align: center;
							top: 20rpx;
							left: 20rpx;
						}
					}
					.titleBox{
						width: 100%;
						height: 141rpx;
						// line-height: 141rpx;
						text-align: center;
						font-size: 26rpx;
						color: #1E1E1E;
						background-color: #fff;
						padding: 0 5rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
					}
					.btnBox{
						width: 100%;
						height: 80rpx;
						display: flex;
						align-items: center;
						background-color: #fff;
						view{
							flex: 1;
						}
						.nums{
							font-size: 29rpx;
							color: #255EB2;
							text-align: center;
							line-height: 80rpx;
						}
						.texts{
							height: 80rpx;
							border-radius: 7rpx;
							background-color: #255EB2;
							color: #fff;
							font-size: 26rpx;
							text-align: center;
							line-height: 80rpx;
						}
					}
				}
			}
		}
		
	}
	/deep/.u-count-down__text{
		line-height: 40rpx;
		color: #1E1E1E;
	}
</style>
